<template>
	<div class="posterList" :style="{ marginRight: props.listMR }">
		<div
			class="poster"
			v-for="(item, index) in props.videoList"
			@click="previewVideo(item)"
			:style="{ width: props.width, height: props.height, marginRight: props.mr }"
		>
			<image :src="item.cover" mode=""></image>
			<image
				class="stop"
				src="http://112.124.50.179:8888/imgs/chaoshan/stop.png"
				mode=""
			></image>
			<image
				v-if="isClose"
				class="close"
				:style="{ top: statusBarHeight + 'px' }"
				src="http://112.124.50.179:8888/imgs/chaoshan/close_.png"
				@click.native.stop="delVideo(index)"
			></image>
		</div>
	</div>
	<up-overlay :show="showOverlay" :mask-click-able="false">
		<image
			@click="showOverlay = false"
			class="overlay_close"
			src="http://112.124.50.179:8888/imgs/tagClose.png"
		></image>
		<video class="overlay_video" :src="currentVideo"></video>
	</up-overlay>
</template>

<script setup>
import { ref, reactive, watchEffect } from 'vue';

const statusBarHeight = getApp().globalData.statusBarHeight;
const props = defineProps({
	isDel: {
		type: Boolean,
		default: false
	},
	videoList: {
		type: Array,
		require: true,
		default: []
	},
	width: {
		type: String,
		require: '216rpx'
	},
	height: {
		type: String,
		require: '216rpx'
	},
	listMR: {
		type: String,
		require: '-22rpx'
	},
	mr: {
		type: String,
		require: '20rpx'
	}
});
const emits = defineEmits(['delVideo']);
const isClose = ref(false);

const showOverlay = ref(false);
const currentVideo = ref('');

watchEffect(() => {
	isClose.value = props.isDel;
});

/**
 * 删除视频
 */
const delVideo = (index) => {
	emits('delVideo', index);
};

/**
 * 上传文件
 */
const uploadFilePromise = (filePath) => {
	return new Promise((resolve, reject) => {
		let a = uni.uploadFile({
			url: uploadUrl,
			filePath,
			name: 'file',
			header: {
				Authorization: uni.getStorageSync('ACCESS_TOKEN')
			},
			success: (res) => {
				setTimeout(() => {
					resolve(res.data);
				}, 1000);
			},
			fail: (err) => {
				uni.showToast({
					title: err.errMsg,
					icon: 'none'
				});
			}
		});
	});
};

/**
 * 预览视频
 */
const previewVideo = (item) => {
	showOverlay.value = true;
	currentVideo.value = item.fileUrl || item;
};
</script>

<style lang="scss">
.posterList {
	display: flex;
	flex-wrap: wrap;
	margin-right: -22rpx;

	.poster {
		width: 216rpx;
		height: 216rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
		margin-bottom: 16rpx;
		overflow: hidden;
		position: relative;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.close {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		right: 0;
		top: 0;
	}

	.stop {
		position: absolute;
		width: 56rpx;
		height: 56rpx;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
}

.overlay_video {
	width: 100%;
	height: 100%;
}

.overlay_close {
	position: absolute;
	width: 64rpx;
	height: 64rpx;
	/*  #ifdef  APP-PLUS || MP-WEIXIN  */
	top: var(--status-bar-height);
	/* #endif */
	/*  #ifdef  H5  */
	top: 100rpx;
	/* #endif */
	left: 32rpx;
	z-index: 999999;
}
</style>
